<script setup lang="ts">
import { computed, reactive } from 'vue'
import { useUncertaintyStore } from './Uncertainty.ts'
import { storeToRefs } from 'pinia'

const store = useUncertaintyStore()
const {
  desiredUncertainty,
  maximumAllowableInfluencePercent,
  maximumAI,
  desiredUCPercent,
  vibrant_para,
  vibrant_option,
  readNum1,
  readNum2,
  readNum3,
  readNum4,
  readNum5,
  unitStr
} = storeToRefs(store)

const handlePaste = async (e: KeyboardEvent) => {
  if (e.ctrlKey && e.key === 'v') {
    e.preventDefault()
    try {
      const text = await navigator.clipboard.readText()
      const numbers = text.split(',').map(Number)
      if (numbers.length >= 5) {
        [readNum1.value, readNum2.value, readNum3.value, readNum4.value, readNum5.value] = numbers
      }
    } catch (err) {
      console.error('读取剪贴板失败:', err)
    }
  }
}

</script>

<template>
  <div>
    <n-tag>输入参数</n-tag>
    <!--     <p>{{ data1 }}</p>-->
    <!-- ref="formRef"是给表单起了个别名，为了在js中更方便的引用 -->
    <n-form id="UC1" ref="formRef" inline :label-width="120" size="small"
            label-placement="left">
      <n-flex>
        <n-form-item label="预期的试验结果不确定度">
          <n-input-number v-model:value="desiredUCPercent"
                          placeholder="预期的试验结果不确定度"
                          :show-button="false"></n-input-number>
          <label>%</label>
        </n-form-item>
        <n-form-item label="数据类型" path="form.vibrant_para">
          <n-select v-model:value="vibrant_para" :options="store.vibrant_option" />
          <label></label>
        </n-form-item>
        <n-form-item label="读数1">
          <n-input-number v-model:value="readNum1" placeholder=""></n-input-number>
          <label>{{ unitStr }}</label>
        </n-form-item>
        <n-form-item label="读数2">
          <n-input-number v-model:value="readNum2" placeholder=""></n-input-number>
          <label>{{ unitStr }}</label>
        </n-form-item>
        <n-form-item label="读数3">
          <n-input-number v-model:value="readNum3" placeholder=""></n-input-number>
          <label>{{ unitStr }}</label>
        </n-form-item>
        <n-form-item label="读数4">
          <n-input-number v-model:value="readNum4" placeholder=""></n-input-number>
          <label>{{ unitStr }}</label>
        </n-form-item>
        <n-form-item label="读数5">
          <n-input-number v-model:value="readNum5" placeholder=""></n-input-number>
          <label>{{ unitStr }}</label>
        </n-form-item>
      </n-flex>
    </n-form>
  </div>
</template>

<style scoped>
.div {
  background-color: coral;
}

.n-tag {
  background-color: coral;
  width: 100%;
  position: relative;
  z-index: 0;
}

.n-input-number {
  width: 120px;
}

.n-form-item {
  min-width: 310px;
}

.label {
  min-width: 120px;
}

.div {
  padding: 1px !important;
}
</style>